
<template>
    <div class="phone home-item">
        <Divloading v-if="!initStatus"></Divloading>
        <div class="phone-main" v-if="show">
            <div class="bcolor">
                <div class="phone-baner-small">
                    <img class="full" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e249ed91c1dd4774d66f2f7da73e21cc.jpg?f=webp">
                </div>
                <div class="swiper-container phone-swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide product-box5-item" v-for="item of swiperPhoneItems" :key="item.id">
                            <div class="product-box5-item-img">
                                <img class="full" :src="item.img">
                            </div>
                            <div class="product-box5-item-content">
                                <p class="name">{{item.name}}</p>
                                <p class="smallgraytext">{{item.desc}}</p>
                                <p><span class="price">{{item.price}}</span> <span class="smallgraytext">起</span> <del class="smallgraytext">{{item.delprice}}</del></p>
                                <div class="buy-btn">立即购买</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="ccolor">
                <div class="phone-baner-small">
                    <img class="full" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d2bd1fea5b07c0f88102cf01325b5414.jpg?f=webp">
                </div>
                <div class="product-box6-item">
                    <div class="product-box6-item-img">
                        <img class="full" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/434a44dab81b2a3e1a27a6244b1a9ecb.jpg?thumb=1&w=688&h=367" >
                        <div class="tag2">
                            <img class="full" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8e84b8e629cd57a7c080d076fdfd62be.png?w=167&h=167">
                        </div>
                    </div>
                    <div class="product-box6-item-content">
                        <div class="flex-sb">
                            <span class="name">Redmi 10X 5G</span>
                            <div class="price">1499起<del>1799</del></div>
                        </div>
                        <div class="flex-sb">
                            <p class="desc">双5G待机，天玑820处理器，4800万流光相机</p>
                            <div class="buy-btn">立即预定</div>
                        </div>
                    </div>
                </div>

                <div class="flex-sb box-mt">
                    <div class="product-box4-item" v-for="item of hotPhoneItems" :key="item.id">
                        <div class="product-box4-item-img">
                            <img class="full" :src="item.img">
                        </div>
                        <div class="product-box4-item-content">
                            <p class="name">{{item.name}}</p>
                            <p class="desc">{{item.desc}}</p>
                            <div class="price">
                                <span class="new bigtext">{{item.new}}</span>
                                <span class="qi smalltext" v-if="item.qi">起</span>
                                <del class="old smalltext">{{item.old}}</del>
                            </div>
                            <div class="buy-btn">立即购买</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="phone-Footer"></div>
        </div>
    </div>
</template>
<script>

import InfiniteScroll from '@/utils/infinitescroll'
import { mapState } from 'vuex';

import Lazyloader from '@/utils/lazyloader';
import Divloading from '@/components/Divloading'

export default {
    name: 'Phone',
    components:{
        Divloading
    },
    data() {
        return {
            initStatus:0,
            show:0,
            swiperPhoneItems:[
                        {
            "id":1,
            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a122fd2ffcebcd861cc0979c9fe192f.jpg?thumb=1&w=304&h=280",
            "name":"Redmi 8A",
            "desc":"5000mA超长续航",
            "price":"699",
            "delprice":"799"
        },
        {
            "id":2,
            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/4a1abcc26da7bd48cb48ce4b8e1e14ae.jpg?thumb=1&w=304&h=280",
            "name":"Redmi K30 5G",
            "desc":"双模5G 120HZ流速屏",
            "price":599,
            "delprice":699
        },
        {
            "id":3,
            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a6f82d549391ebb9f67c34423eb30b99.jpg?thumb=1&w=304&h=280",
            "name":"Redmi K30 5G",
            "desc":"双模5G 120HZ流速屏",
            "price":599,
            "delprice":699
        },
        {
            "id":4,
            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/bde9f92c56549ec2532a4fc74d3f648a.jpg?thumb=1&w=304&h=280",
            "name":"Redmi K30 5G",
            "desc":"双模5G 120HZ流速屏",
            "price":599,
            "delprice":699
        },
        {
            "id":5,
            "img":"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8a122fd2ffcebcd861cc0979c9fe192f.jpg?thumb=1&w=304&h=280",
            "name":"Redmi K30 5G",
            "desc":"双模5G 120HZ流速屏",
            "price":599,
            "delprice":699
        }
            ],
            hotPhoneItems:[
            ],
            noMore:0
        }
    },
    mounted() {
        console.log('Phone mounted');
        this.init();
    },
    computed: {
        ...mapState(['navIndex'])
    },
    methods: {
        init() {
            setTimeout(() => {
                this.initStatus = 1;
                this.show = 1;
                this.nextTickRender();
            },1000)
        },
        nextTickRender() {
            this.$nextTick(()=>{
                new Lazyloader('img[lazy="loaded"]');
                new this.$swiper('.phone-swiper',{
                    slidesPerView: 3,
                    spaceBetween: 8,
                    centeredSlides: true,
                    loop: true,
                    pagination:{
                        el:'.swiper-pagination'
                    },
                    touchMoveStopPropagation:true
                });  
                https://实现无限加载
                new InfiniteScroll({
                    root:'.home-main',  
                    el:'.phone-Footer',
                },this.handle); 
               
            }) 
        },
        handle() {
            if(this.noMore) {
                return;
            }
            this.loadMore();
        },
        loadMore() {
            setTimeout(() => {
                this.$axios.get('/home/phonelistmore').then((res) => {
                    let data = res.data;
                    let hotPhoneItems = data.hotPhoneItems;
                    this.hotPhoneItems.push(...hotPhoneItems);
                }).catch((err)=>{
                    alert('网络出错啦~',err);
                })
                this.noMore = 1;
            },1000)
           
        }
    },
    watch:{
        navIndex(newindex) {
            if(newindex === 1) {
                if(!this.initStatus) {
                    this.init();
                }
            }
        }
    }
}
</script>

<style lang="stylus">

@import '../../../assets/css/theme.styl';

.phone-baner-small
    width:100%;
    height:74.81px;
.phone-swiper
    width:100%;
    height:286px;
    position relative
.product-box5-item
    width:174px !important;
    margin-bottom 8px;
    .product-box5-item-img
        width 100%;
        height 161px;
        z-index: 2;
    .product-box5-item-content
        margin-top -1px;
        z-index: 1;
        line-height:1.5;
        padding 11.5px 15.525px;
        background: #fff;
        .name
            font-size:16px;
            color rgba(0,0,0,.87);
        .price
            font-size:16px;
            color #ea625b;

.bcolor
    background rgb(114, 187, 111)
.ccolor
    background rgb(111, 145, 187);
    padding:0 8px;
.buy-btn
    height 28.2px !important;
    line-height 28.2px !important;
    padding 0 30px !important;

.phone
    .product-box4-item
        width:194.8px;
        border-radius:5.75px;
        overflow hidden
        margin-bottom 8px;
        .product-box4-item-img
            width 100%;
            height 194px;
        .product-box4-item-content
            line-height:1.5;
            margin auto;
            padding 11.5px 15.525px;
            background: #fff;
            .name
                font-size:18.4px;
                font-weight:bold;
                color rgba(0,0,0,.87);
            .desc
                font-size:12px;
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
                color #3c3c3c;
            .price
                .new
                    font-size:18.4px;
                    font-weight: bold;
                    color #ea625b;
                    position relative;
                .new::after
                    content: "\A5";
                    position: absolute;
                    left: -10px;
                    top: 0;
                    font-size: .76em;
                    text-decoration: none;
                .qi
                    color #ea625b;
                    font-size: 14px;
                    font-weight: bold;
                .old
                    font-size: 14px;
                    font-weight: bold;
                    color: rgba(0,0,0,.54);
                    margin-left 5px;
</style>